<template>
  <div class="uese">
    <!-- 已登录界面   -->
    <div v-if="$store.state.login.userToken" class="user_info_wrap">
      <div class="header">
        <div class="user_top">
          <div class="user_top_left">
            <van-image class="left_img" round :src="userData.photo" />
            <p class="left_txt">{{userData.name}}</p>
          </div>
          <div class="user_top_right">
            <p class="right_txt" @click="$router.push('/editUser')">编辑资料</p>
          </div>
        </div>
        <div class="user_bottom">
          <div class="toutiao box">
            <p class="num">{{userData.art_count}}</p>
            <p class="txt">头条</p>
          </div>
          <div class="guanzhu box">
            <p class="num">{{userData.follow_count}}</p>
            <p class="txt">关注</p>
          </div>
          <div class="fensi box">
            <p class="num">{{userData.fans_count}}</p>
            <p class="txt">粉丝</p>
          </div>
          <div class="huozan box">
            <p class="num">{{userData.like_count}}</p>
            <p class="txt">获赞</p>
          </div>
        </div>
      </div>
    </div>

    <!-- 未登录界面  点击时去往登录页面  -->
    <div v-else class="not_login" @click="$router.push('/login')">
      <div class="header">
        <div class="not_login_info">
          <img class="not_login_img" src="~@/assets/mobile.png" />
          <p class="not_login_txt">登录 / 注册</p>
        </div>
      </div>
    </div>

    <!-- 收藏/历史 -->
    <van-grid class="grid_nav" :border="false" :column-num="2" clickable>
      <van-grid-item class="grid_item">
        <i class="iconfont icon-shoucang" slot="icon"></i>
        <span class="grid_text" slot="text">收藏</span>
      </van-grid-item>

      <van-grid-item class="grid_item">
        <i class="iconfont icon-lishi" slot="icon"></i>
        <span class="grid_text" slot="text">历史</span>
      </van-grid-item>
    </van-grid>

    <!-- 下面功能区 -->
    <div class="userInfo">
      <van-cell title="消息通知" is-link />
      <van-cell title="小智同学" is-link />
    </div>

    <!-- 退出登录 -->
    <van-button
      class="logout"
      v-if="$store.state.login.userToken"
      @click="onLogout"
      type="default"
      block
    >退出登录</van-button>
  </div>
</template>

<script>
import { getUserData } from "@/api/axios";
export default {
  name: "uese",
  data() {
    return {
      uesrImg: "" || "https://img.yzcdn.cn/vant/cat.jpeg",
      // 页面用户信息
      userData: {}
    };
  },
  methods: {
    // 请求用户数据
    async getUserData() {
      const { data:res } = await getUserData();
      console.log(res);
      try{
        this.userData=res.data
      }catch(err){
      this.$toast.fail('获取用户数据失败，请稍后重试！');
      }
      
    },

    // 退出登录=====删除token值
    onLogout() {
      this.$dialog
        .confirm({
          title: "温馨提示",
          message: "你个傻猪猪，确定不是手抖了，是真的要退出？"
        })
        .then(() => {
          // on confirm
          this.$store.commit("setUserToken", null);
          this.$notify({
            type: "success",
            message: "退出登录成功",
            duration: 1000
          });
        })
        .catch(() => {
          // on cancel
          this.$notify({
            message: "取消退出登录",
            color: "#1989fa",
            background: "#ecf9ff",
            duration: 1000
          });
        });
    }
  },
  created() {
    if (this.$store.state.login.userToken) {
      // 判断书否为未登录状态
      this.getUserData();
    }
  }
};
</script>

<style scoped lang='less'>
.uese {
  .header {
    width: 100%;
    height: 360px;
    background: url("~@/assets/banner.png") no-repeat;
    background-size: cover;
  }
  .not_login_info {
    width: 100%;
    height: 361px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .not_login_img {
      border-radius: 50%;
      width: 132px;
      height: 132px;
    }
    .not_login_txt {
      font-size: 28px;
      color: #fff;
    }
  }
  .user_top {
    width: 100%;
    height: 230px;
    padding-bottom: 23px;
    display: flex;
    justify-content: space-between;
    .user_top_left {
      display: flex;
      align-items: flex-end;
      margin-left: 34px;
      .left_img {
        width: 132px;
        height: 132px;
        border-radius: 50%;
      }
      .left_txt {
        margin-left: 23px;
        color: #fff;
        font-size: 28px;
      }
    }
    .user_top_right {
      display: flex;
      align-items: flex-end;
      margin-right: 23px;
      .right_txt {
        font-size: 20px;
        padding: 6px 17px;
        background-color: #fff;
        border-radius: 16px;
        color: #666666;
      }
    }
  }
  .user_bottom {
    padding-top: 30px;
    height: 130px;
    display: flex;
    justify-content: space-around;
    .box {
      display: flex;
      flex-direction: column;
      align-items: center;
      p {
        margin: 0;
        padding: 0;
      }
      color: #fff;
      flex: 1;
      .num {
        font-size: 26px;
      }
      .txt {
        font-size: 22px;
        margin-top: 14px;
      }
    }
  }
  .grid_nav {
    .grid_item {
      height: 141px;
      i.iconfont {
        font-size: 45px;
      }
      .icon-shoucang {
        color: #eb5253;
      }
      .icon-lishi {
        color: #ff9d1d;
      }
      .grid_text {
        font-size: 28px;
        margin-top: 16px;
      }
    }
  }
  .userInfo {
    margin: 9px 0;
  }
  .logout {
    border: none;
    color: #d86262;
  }
}
</style>